<template>
	<view class="container">
		<view class="content">
			<view class="box">
				<view class="midd" @click="headleUp" v-if="!adImg">
					<view class="header">
						<image src="/static/image/sc.png"></image>
						<view>上传图片</view>
					</view>
					<view class="base">690px * 240px</view>
				</view>
				<view class="anew_img" v-else>
					<image :src="adImg" class="ad_img"></image>
					<view class="anew" @click="headleUp">
						<image src="/static/image/cx.png"></image>
						<view>重新上传</view>
					</view>
				</view>
			</view>

			<view class="fill_con">
				<view class="fill_btn">
					<view v-for="(item,index) in tabList" :key="item.id" class="tab" @click="headleCut(index)"
						:class="{'active':(item.id==1 && item.state),'activweb':(item.id==2 && item.state)}">
						<image :src="item.state?item.icons:item.icon"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
				<view v-if="tabList[0].state" class="wx_input">
					<view class="item">
						<view>小程序Appid</view>
						<input :value="AppidValues" @input="headleAppid" type="text" />
					</view>
					<view class="item">
						<view>小程序路径</view>
						<input :value="wxPath" @input="headlePath" type="text" />
					</view>
					<button @click="headleAdd">{{state!==null?"保存修改":"添加小程序广告"}}</button>
				</view>
				<view v-if="tabList[1].state" class="web_input">
					<view>
						<view>链接</view>
						<textarea :value="webLink" @input="healeLink" type="text" />
					</view>
					<button @click="headleWeb">{{state!==null?"保存修改":"添加web-view广告"}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
						id: 1,
						name: '跳转小程序',
						state: true,
						icon: '/static/image/wx.png',
						icons: '/static/image/wxs.png'
					},
					{
						id: 2,
						name: 'web-View',
						state: false,
						icon: '/static/image/view.png',
						icons: '/static/image/views.png'
					},
				],
				link: '', //全局路径
				adImg: '', //广告图片路径
				AppidValues: '', //保存小程序id值
				wxPath: '', //保存小程序；路径
				webLink: '', //保存webview链接
				stateId: null,
				state: null
			}
		},
		onLoad(options) {
			this.stateId = options.id
			this.link = getApp().globalData.upHttp
			this.getDetail()
		},
		methods: {
			//小程序和web-view切换回调
			headleCut(index) {
				this.tabList.map((item, i) => i === index ? item.state = true : item.state = false)
			},
			//上传广告回调
			headleUp() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						let tempFilePath = res.tempFilePaths[0]
						uni.showLoading({
							title: '上传中...',
							mask: true
						})
						uni.uploadFile({
							url: that.link + 'admin/upload-img',
							name: 'imgFile',
							filePath: tempFilePath,
							header: {
								// 'content-type': 'multipart/form-data',
								'Authorization': uni.getStorageSync('token')
							},
							success(res) {
								let data = JSON.parse(res.data)
								if (data.code === 0) {
									that.adImg = data.data.imgUrl
									uni.hideLoading()
								} else {
									uni.showToast({
										title: "文件格式错误",
										icon: "none"
									})
									uni.hideLoading()
								}
							}
						})
					}
				})
			},

			//获取小程序输入的id
			headleAppid(e) {
				this.AppidValues = e.detail.value
			},
			// 获取小程序输入路径
			headlePath(e) {
				this.wxPath = e.detail.value
			},

			// 添加/修改小程序广告
			headleAdd() {
				this.myRequesy({
					url: this.state === 0 ? 'admin/ad/update' : 'admin/ad/add',
					method: 'POST',
					data: {
						ad_id: this.stateId,
						img: this.adImg,
						state: 0,
						appid: this.AppidValues,
						path: this.wxPath
					}
				}).then(res => {
					if (res.data.code === 0) {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},

			// 获取web-view输入的值
			healeLink(e) {
				this.webLink = e.detail.value
			},

			// 添加/修改web view广告
			headleWeb() {
				this.myRequesy({
					url: this.state === 1 ? 'admin/ad/update' : 'admin/ad/add',
					method: 'POST',
					data: {
						ad_id: this.stateId,
						img: this.adImg,
						state: 1,
						url: this.webLink
					}
				}).then(res => {
					if (res.data.code === 0) {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},


			//获取广告详情
			getDetail() {
				let that = this
				this.myRequesy({
					url: 'admin/ad/detail',
					data: {
						ad_id: that.stateId
					}
				}).then(res => {
					if (res.data.data.state === 1) {
						that.tabList[0].state = false
						that.tabList[1].state = true
						that.adImg = res.data.data.img,
							that.webLink = res.data.data.url
						that.state = res.data.data.state
					} else {
						that.adImg = res.data.data.img,
							that.AppidValues = res.data.data.appid
						that.wxPath = res.data.data.path
						that.state = res.data.data.state
					}
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.content {
			padding: 40upx 30upx;

			.box {
				position: relative;
				width: 690upx;
				height: 240upx;
				border-radius: 16upx;
				background-color: rgba(0, 0, 0, 0.05);
				margin-bottom: 20upx;

				.anew_img {
					width: 690upx;
					height: 240upx;

					.ad_img {
						width: 100%;
						height: 100%;
						border-radius: 16upx;
					}

					.anew {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						color: #fff;
						font-size: 26upx;
						display: flex;
						align-items: center;
						background-color: rgba(0, 0, 0, 0.5);
						width: 160upx;
						padding: 10upx;
						border-radius: 16upx;

						image {
							width: 40upx;
							height: 40upx;
						}
					}
				}


				.midd {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);

					.header {
						display: flex;
						align-items: center;
						color: rgba(64, 64, 64, 100);
						font-size: 30upx;
						margin-bottom: 20upx;

						image {
							width: 42upx;
							height: 42upx;
							margin-right: 6upx;
						}
					}

					.base {
						color: rgba(0, 0, 0, 0.35);
						font-size: 13px;
					}
				}
			}

			.fill_con {
				.fill_btn {
					width: 690upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.tab {
						width: 338upx;
						height: 88upx;
						line-height: 88upx;
						border-radius: 12upx;
						font-weight: 600;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28upx;
						box-sizing: border-box;

						image {
							width: 40upx;
							height: 40upx;
							margin-right: 10upx;
						}
					}

					.tab:first-child {
						border: 2upx solid rgba(55, 182, 74, 100);
						color: rgba(55, 182, 74, 100);
					}

					.tab:last-child {
						border: 2upx solid rgba(40, 141, 248, 100);
						color: rgba(40, 141, 248, 100);
					}

					.active {
						color: rgba(255, 255, 255, 100) !important;
						background-color: rgba(55, 182, 74, 100);
					}

					.activweb {
						background-color: rgba(40, 141, 248, 100);
						color: rgba(255, 255, 255, 100) !important;
					}
				}

				.wx_input {
					.item {
						margin: 40upx 0upx;
						color: rgba(0, 0, 0, 0.5);
						font-size: 26upx;

						view {
							margin-bottom: 20upx;
						}

						input {
							width: 690upx;
							height: 96upx;
							border-radius: 10upx;
							background-color: rgba(251, 251, 251, 100);
							border: 2upx solid rgba(0, 0, 0, 0.05);
							box-sizing: border-box;
							padding-left: 10upx;
						}
					}

					button {
						margin-top: 200upx;
						color: white !important;
						background-color: #37b64a !important;
						width: 400upx;
					}
				}

				.web_input {
					margin-top: 40upx;

					view {
						color: rgba(0, 0, 0, 0.5);
						font-size: 26upx;
						margin-bottom: 20upx;
					}

					textarea {
						width: 690upx;
						height: 160upx;
						border-radius: 12upx;
						background-color: rgba(251, 251, 251, 100);
						border: 2upx solid rgba(0, 0, 0, 0.05);
						padding: 20upx;
						box-sizing: border-box;
					}

					button {
						color: white !important;
						width: 400upx;
						margin-top: 200upx;
						background-color: #288df8 !important;
					}
				}
			}
		}
	}
</style>
